<template>
  <el-container class="home_container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '60px' : '210px'">
      <div class="company_title">
        <img :src="circleUrl" class="logo" />
        <b class="logo_name">小明大叔分销后台管理</b>
      </div>

      <!-- 导航栏 -->
      <el-menu
        background-color="#002140"
        text-color="#fff"
        active-text-color="#409EFF"
        unique-opened
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        :default-active="activePath"
        router
      >
        <el-menu-item
          :index="item.path"
          v-for="item in menulist"
          :key="item.id + 'c'"
           @click="saveNavState(item.path)"
         >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.authName }}</span>
        </el-menu-item>

        <el-submenu
          :index="item.id + ''"
          v-for="item in menulist1"
          :key="item.id"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.authName }}</span>
          </template>

          <el-menu-item
            :index="'/' + subItem.path"
            v-for="subItem in item.children"
            :key="subItem.id"
            @click="saveNavState('/' + subItem.path)"
          >
            <template slot="title">
              <span>{{ subItem.authName }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-row :gutter="10">
          <el-col :span="20">
            <i class="el-icon-s-operation" @click="toggleCollapse"></i>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="2">
              <el-col :span="6">
                <i class="el-icon-search"></i>
              </el-col>
              <el-col :span="6">
                <i class="el-icon-bell"></i>
              </el-col>
              <el-col :span="12">
                <el-avatar :src="circleUrl" class="avatorPic"></el-avatar>
                <el-dropdown size="mini" @command="handleCommand">
                  <span id="avatorTitle">
                    Direty
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item >个人信息</el-dropdown-item> -->
                    <el-dropdown-item>退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>

      <!-- main -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      menulist:[
        {
          id: 1,
          authName: "用户管理",
          icon: "el-icon-s-order",
          path: "/user",
        },
        {
          id: 2,
          authName: "商品管理",
          icon: "el-icon-s-platform",
          path: "/shop",
        },
        {
          id: 3,
          authName: "优惠卷管理",
          icon: "el-icon-s-unfold",
          path: "/discount",
        },
      ],
      menulist1: [
        {
          id: 0,
          authName: "订单管理",
          icon: "el-icon-picture",
          path:"/orders",
          children: [
            { id: 0, authName: "订单管理", path: "order" },
            { id: 1, authName: "待发货订单管理", path: "sending_goods" },
          ],
        },
        {
          id: 1,
          authName: "页面管理",
          icon: "el-icon-picture",
          path:"/pages",
          children: [
            { id: 0, authName: "轮播图管理", path: "chart" },
            { id: 1, authName: "推广海报管理", path: "poster" },
          ],
        },
        {
          id: 2,
          authName: "退款管理",
          icon: "el-icon-picture",
          path:"/money",
          children: [
            { id: 0, authName: "退款审核管理", path: "refunding_audit" },
            { id: 1, authName: "退款记录", path: "audit" },
          ],
        },
        
      ],
      activePath: "",
      // 头像
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {
    handleCommand(command) {
      window.sessionStorage.clear();
      // 跳转登录页面
      this.$router.push("/login_register");
    },
    logout() {
      //清空token
      console.log("退出登录");
      window.sessionStorage.clear();
      // 跳转登录页面
      this.$router.push("/login_register");
    },
    // 菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    //
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    //
    // handleCommand(command) {
    //     this.$message('click on item ' + command);
    //   },
    //
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
};
</script>

<style scoped>
.home_container {
  height: 100%;
}
/* el-header */
.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
}
.el-header .el-col {
  border-radius: 4px;
}
.el-header .el-col i {
  cursor: pointer;
}
.el-header .el-col i:hover,
i:active {
  cursor: pointer;
  color: #ededed;
}

.el-header .el-col .el-row .el-col i {
  margin-left: 17px;
  cursor: pointer;
}
.el-header .el-col .avatorPic {
  position: absolute;
  margin-top: 20px;
  margin-left: 15px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#avatorTitle {
  font-size: 8px;
  font-weight: lighter;
  margin-left: 50px;
  cursor: pointer;
}

/* el-aside */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}

.company_title {
  width: 200px;
  height: 60px;
  background: #002140;
  color: white;
  line-height: 60px;
  text-align: center;
}
.logo {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  left: 2px;
}
.logo_name {
  position: relative;
  left: 15px;
  display: inline-block;
  /* background: pink; */
  font-weight: blod;
  font-size: 14px;
}
.el-aside {
  background-color: #002140;
  color: #333;
  height: 100%;
}
.el-aside .el-menu {
  border-right: none;
}
.el-menu-item.is-active {
  border-right: 6px solid blue;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  padding: 0;
}
</style>
